<script lang="tsx">
import {Component, Vue} from 'vue-property-decorator'

import HelloWorld from "./components/HelloWorld.vue";

// 以类样式定义组件
@Component
export default class App extends Vue {
    // private name: string = "df"
    // 相当于method:{hello(){}}
    hello() {
        console.log("hellop")
    }

    firstName = 'John'
    lastName = 'Doe'

    //region 类的getter和setter 不添加字段 例如：private name:String = "", 就是计算属性， 否则就不是的了
    // 声明为计算属性 getter
    get name() {
        return this.firstName + ' ' + this.lastName
    }

    // 声明为计算属性 setter
    set name(value) {
        const splitted = value.split(' ')
        this.firstName = splitted[0]
        this.lastName = splitted[1] || ''
    }
    //endregion

    render() {
        return (
            <div>
                <input type="text" vModel={this.name}/>
                <br/>
                {this.name}
            </div>
        )
    }

}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
